<template>
  <div class="magazine-lists-search">
    <div class="head-search-item" @click="handleClickOpenDialog">
      <!-- TODO 小程序端需要使用disabled-->
      <div class="icon miniprogram">
        <img class="img_search" src="https://img.wifenxiao.com/h5-wfx/images/common/search-icon.png" />
      </div>
    </div>
    <van-popup class="search-pop" v-model="showSearchDialog" :overlay="false" transition="van-slide-right">
      <div class="head-search-dialog">
        <div class="head-wrap">
          <div class="head-search-item">
            <input
              ref="searchInput"
              type="text"
              v-model="keywords"
              placeholder="请输入专题名称"
              @confirm="searchGoodsEvent">
            <div class="icon miniprogram" @click="searchGoodsEvent">
              <img class="img_search" src="https://img.wifenxiao.com/h5-wfx/images/common/search-icon.png" />
            </div>
          </div>
          <div class="head-search-cancel" @click="clickCancel">取消</div>
        </div>
        <div class="middle-wrap">
          <div class="search-tips" v-if="searchList && searchList.length > 0 && !isSearched">
            <div class="search-tips-title">
              <span>搜索历史</span>
              <span class="icon fr miniprogram" @click="handleClickDelete">
                <img class="img_delete" src="https://img.wifenxiao.com/h5-wfx/images/common/delete-icon.png" mode="scaleToFill" />
              </span>
            </div>
            <div class="search-tips-wrap">
              <div
                class="search-tips-wrap-item"
                @click="handleClickHistory(item)"
                v-for="(item,index) in searchList"
                :key="index">{{ item }}</div>
            </div>
          </div>
          <div class="search-lists-wrap" v-if="isSearched">
            <div class="search-lists" v-if="magazineList.length>0">
              <div v-for="(item,index) in magazineList" :key="index" class="list-item clearfix" @click="JumpName('magazine',{id:item.magazine_id})">
                <img :src="item.view_pic || defaultImg" />
                <a href="javascript:;" class="title" v-html="replaceTitle(item.title)"></a>
              </div>
            </div>
            <div class="no-data" v-else-if="showNoData">
              <no-data :noData="noData"></no-data>
            </div>
          </div>
        </div>
      </div>      
    </van-popup>
  </div>
</template>

<script>
  import { searchMagazineList } from '@/api/shop/index'
  import noData from '@/components/noData/index'
  import { Dialog } from 'vant'
  // import 'vant/lib/index.css'
  import StoreSave from '@/utils/store'
  
  import Vue from 'vue'

  export default Vue.extend({
    name: 'index',
    components: {
      noData
    },
    // props: {
    //   value: {
    //     type: String
    //   }
    // },
    data() {
      return {
        noData: {
          text: '抱歉，没有找到搜索内容额~',
          img: 'https://img.wifenxiao.com/h5-wfx/images/no_magazine.png',
          width: '214px',
          txtColor: '#999',
          marginTop: '60px',
          txtMarginTop: '-50px'
        },
        showNoData: false,
        defaultImg:'https://img.wifenxiao.com/h5-wfx/images/default_goods_img.jpg',
        showSearchDialog: false,
        keywords: '',
        isSearched: false,
        magazineList: [],
        searchList: [],
        magazineListParams: {
          p: 1,
          title: ''
        }
      }
    },
    watch: {
      // value() {
      //   this.keywords = this.value
      // }
      keywords(val) {
        // // console.log(val)
        if (val.length <= 0) {
          this.isSearched = false
        }
      }
    },
    mounted() {
      this.getHistory()
      // this.keywords = this.value
    },
    methods: {
      JumpName(name, data) {
        this.$JumpName(this, name, data)
      },
      // 删除历史搜索按钮
      handleClickDelete() {
        Dialog.confirm({
          message: '确定删除全部搜索历史？',
          className: 'common-confirm',
          closeOnClickOverlay: true
        }).then(() => {
          // on confirm
          this.searchList = []
          this.keywords = ''
          StoreSave.saveLocal('magazineSearchHistory', this.searchList)
        }).catch(() => {
          // on cancel
        })
      },
      /**
       * 打开搜索弹层，输入框自动获取焦点
       */
      handleClickOpenDialog() {
        this.showSearchDialog = true
        setTimeout(() => {
          this.$refs.searchInput.focus()
        }, 300)
      },
      // 关闭弹层
      clickCancel() {
        this.showSearchDialog = false
        this.isSearched = false
        this.magazineList = []
        this.magazineListParams.title = this.keywords = ''
        this.magazineListParams.p = 1
      },
      // 搜索结果标题处理
      replaceTitle(title) {
        if (!title) {
          return ''
        }
        if (this.keywords && this.keywords.length > 0) {
          // 匹配关键字正则
          const replaceReg = new RegExp(this.keywords, 'g')
          // 高亮替换v-html值
          const replaceString = '<span class="em">' + this.keywords + '</span>'
          // 开始替换
          title = title.replace(replaceReg, replaceString)
        }
        return title
      },
      /**
       * 抛出refreshFn方法提供搜索
       */
      getMagazineList() {
        this.magazineListParams.title = this.keywords
        searchMagazineList(this.magazineListParams).then(res => {
          if (res.status == 1) {
            const resData = res.data
            if (resData.list.length > 0) {
              this.magazineListParams.p++
              this.magazineList = this.magazineList.concat(resData.list)
              if (this.magazineList.length <= 0) {
                this.showNoData = true
              }
              this.getMagazineList()
            }
            if (this.magazineList.length <= 0) {
              this.showNoData = true
            } else {
              this.showNoData = false
            }
          }
        })
      },
      searchGoodsEvent() {
        if (this.keywords && this.keywords.length > 0) {
          this.isSearched = true
          this.magazineListParams.p = 1
          this.magazineListParams.title = ''
          this.magazineList = []
          this.getMagazineList()
  
          const searchList = this.searchList
          // // console.log(searchList, 111)
          searchList.push(this.keywords)
          this.searchList = searchList
        } else {
          this.$Error('请输入专题名称')
        }
        const arr = [...new Set(this.searchList)]
        this.searchList = arr
        StoreSave.saveLocal('magazineSearchHistory', arr)
      },
      /**
       * 点击历史记录搜索
       */
      handleClickHistory(item) {
        this.keywords = item
        this.searchGoodsEvent()
      },
      /**
       * 历史搜索
       */
      getHistory() {
        const magazineSearchHistory = StoreSave.fetchLocal('magazineSearchHistory')
        this.searchList = Array.isArray(magazineSearchHistory) ? magazineSearchHistory : []
      }
    }
  })
</script>

<style lang="scss">
  @import "src/styles/mixin";
  .magazine-lists-search{
    box-sizing: border-box;
    // padding: 20px;
    background: #fff;
    max-width: 750px;
    margin: 0 auto;
    .head-search-item{
      position: relative;
      width: 100%;
      height: 72px;
      border-radius: 36px;
      font-size: 0;
      background: #f7f7f7;
      // .icon {
      //   position: absolute;
      //   line-height: 72px;
      //   left: 28px;
      //   top:0;
      //   color: #999999;
      //   font-size: 28px;
      //   margin-right: 10px;
      //   .icon_search{
      //     width:28px;
      //     height:28px;
      //   }
      // }
      .icon {
        position: absolute;
        line-height: 72px;
        left: 28px;
        top:0;
        color: #999999;
        font-size: 28px;
        margin-right: 10px;
        &.miniprogram {
          line-height: initial;
          top:22px;
        }
        .icon_search, .img_search{
          width:28px;
          height:28px;
        }
      }
      @include placeColor(#999);
      input {
        display: inline-block;
        box-sizing: border-box;
        width: 100%;
        height: 100%;
        font-size: 24px;
        padding: 15px 70px;
        border: 0;
        background: transparent;
      }
    }
    .search-pop{
      top:0;
      left:0;
      width:100%;
      height:100%;
      transform:none;
      .head-wrap{
        font-size: 0;
        padding: 20px 30px;
        .head-search-item{
          display: inline-block;
          width: calc(100% - 90px);
          // @include alignTop;
        }
        .head-search-cancel{
          display: inline-block;
          width: 90px;
          line-height: 72px;
          height: 72px;
          font-size: 26px;
          text-align: center;
          color: #333;
          @include alignTop;
        }
      }
      .middle-wrap{
        padding-top: 10px;
        border-radius: 40px;
        background: #fff;
        .search-tips{
          padding:20px 30px 0;
          &-title{
            margin-bottom: 30px;
            span{
              display: inline-block;
              font-size: 26px;
              color: #333;
            }
            .icon{
              font-size:30px;
              color: #999;
              padding: 10px;
              margin-top:-14px;
              &.miniprogram{
                margin-top: 0;
              }
              .img_delete{
                width:30px;
                height:29px;
              }
            }
          }
          &-wrap{
            font-size: 0;
            &-item{
              padding: 12px 28px;
              display: inline-block;
              background: #F2F2F2;
              color: #666;
              border-radius: 60px;
              font-size: 24px;
              margin-right: 16px;
              margin-bottom: 16px;
            }
          }
        }
      }
      .search-lists{
        // margin-top:20px;
        background-color: #fff;
        .list-item{
          position: relative;
          border-bottom: 2px solid #f7f7f7;
          overflow: hidden;
          padding: 20px 30px;
          img{
            display:block;
            float: left;
            width: 80px;
            height: 80px;
            border: 0;
          }
          .title{
            padding-left: 16px;
            display: inline-block;
            font-size: 28px;
            color: #999;
            height: 80px;
            line-height:80px;
            width: calc(100% - 100px);
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
            .em{
              color:#333;
            }
          }
        }
      }
    }
  }
</style>
